<template>
  <!-- 主体部分 -->
  <section class="main">
    <input
        id="toggle-all"
        v-model="checked"
        class="toggle-all"
        type="checkbox"
    />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <!-- 当任务已完成，可以给 li 加上 completed 类，会让元素加上删除线 -->
      <li v-for="item in threeCheckOne " :key="item.id">
        <div class="view">
          <input :checked="item.isDone" class="toggle" type="checkbox" @change="changeStatus(item.id)"/>
          <label>{{ item.name }}</label>
          <button class="destroy" @click="delFn(item.id)"></button>
        </div>
      </li>
    </ul>
  </section>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('todo', ['threeCheckOne']),
    checked: {
      get () { return this.threeCheckOne.every(item => item.isDone)},
      set (checkedStatus) {
        this.$store.dispatch('todo/changeServeStatus', checkedStatus)
      }
    }
  },
  methods: {
    delFn (id) {
      this.$store.dispatch('todo/delfn', id)
    },
    changeStatus (status) {
      this.$store.dispatch('todo/changeCheckedStatus', status)
    }
  }

}
</script>
